import {
  useEffect,
  useState,
  useCallback,
  useRef,
  useImperativeHandle,
  forwardRef,
} from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import {
  Tabs,
  Badge,
  Modal,
  Dropdown,
  Menu,
  Button,
  message,
  notification,
} from 'antd';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import { getEditor, InbizIcon, initSocket, useApp, useEvents } from '@inbiz/utils';
import { useInbizRouter } from '@inbiz/hooks';
import { useGetMessageGroupEffect } from './hook';
import { setReaded, getMessageAllGroup } from '../service';
import { TextWidget, getMessage } from '@inbiz/react';
// @ts-ignore
import { routerPrefix } from 'InbizConfig';
import MessageDetail from './MessageDetail';
import './style.less';

const { TabPane } = Tabs;

const hintMessage = (res: string) => {
  return message.warning({ content: res, key: 'inbizMessage' });
};

const Message = forwardRef((props: any, ref: any) => {
  return (
    <div className="inbiz-message">
      {
        props.viewtype === 'list' ? (
          <>
            <BizHeader {...props} />
            <BizBody {...props}>
              <MessageList {...props} refs={ref}></MessageList>
            </BizBody>
          </>
        )
          : <MessageList {...props} refs={ref}></MessageList>
      }

    </div>
  );
});

interface Message {
  rememberNum: number;
  headerStyle: any;
  msgGroup: any[];
  modalIcon: { type: string; color: string; size: number };
  viewtype: 'modal' | 'list';
  openWith: 'Pop up' | 'newPage' | 'currentWindow';
  modalType: 'topDown' | 'leftRight'
  correlationPage: string;
  messageIcon: { type: string; color: string; size: number };
  modalPrompt: boolean;
  range: string,
  controlId: string;
  defaultType: '0' | '-1';
  defaultType1: '0' | '1';
  inbiz: any;
  refs: any;
  callBackEvents: {
    onMsgGroupTrans?: (group: object[]) => object[];
  };
  emit: any;
}

const MessageList = (props: Message) => {
  const { modalType = 'topDown', callBackEvents, emit } = props
  const [group, $group] = useState<any[]>([]);
  const request = useGetMessageGroupEffect();
  const [modalShow, $modalShow] = useState(false);
  const [tabModalShow, $tabModalShow] = useState(false);
  const [selectGroup, $selectGroup] = useState<any>(null);
  const [selectMenuKey, $selectMenuKey] = useState<any>('all');
  const [selectReadState, $selectReadState] = useState<number | '-1' | '0' | '1'>((props.viewtype === 'modal' && modalType === 'leftRight') ? props.defaultType1 || '0' : props.defaultType || '-1');
  const [isfullModal, $isfullModal] = useState(false);
  const [modalGroup, $modalGroup] = useState(false);
  const [allRead, $allRead] = useState(false);
  const [key, $key] = useState<number>(1);
  const [loading, $loading] = useState<boolean>(false);
  const [activeGK, $activeGK] = useState<string>('')
  const [emptyData, $emptyData] = useState<any>({})
  const beforeGroupToString = useRef<string>('');
  const beforeRangeToString = useRef<string>('');
  const signalrRef = useRef<any>();
  const messageList = useRef<any[]>([]);
  const appInfo = useApp();
  const timer = useRef<any>();
  const datalRef = useRef<any>();
  const isEditor = getEditor();
  const history = useInbizRouter();
  const [configEvents]: any = useEvents(callBackEvents, emit);

  useImperativeHandle(props.refs, () => ({
    getNum: () => {
      return getNum();
    },
    setEmptyData: (config: any) => $emptyData(config)
  }));

  useEffect(() => {
    // 设置消息通知配置
    notification.config({
      duration: 8,
      maxCount: 5,
      top: 65,
    });
    // 实时弹窗
    if (props.viewtype == 'modal' && props.modalPrompt) openTimer();
    const fn = (e: any) => {
      // 同步刷新
      if (e?.data?.type === 'refresh') {
        if (e?.data?.id !== props.controlId) {
          reFresh();
        }
      }
      // 收到推送
      if (e?.data?.type === 'message') {
        const { message, returnUrl, key, appId, time } = e?.data?.data || {}
        if (all.current?.some((item) => item.groupKey === key && item.appId === appId)) {
          messageList.current = [
            ...messageList.current,
            { message: message, url: returnUrl, key: time },
          ];
          throttle(reFresh, 1000)();
          datalRef.current?.refreshList()
        }
      }
    };
    if (!isEditor) window.addEventListener('message', fn, false);
    // @ts-ignore
    if (!window.socket && !isEditor) {
      // @ts-ignore
      window.socket = true
      // @ts-ignore
      window.socket = initSocket()
    }
    return () => {
      if (!isEditor) window.removeEventListener('message', fn);
      clearTimeout(timer.current);
    };
  }, []);

  const getBadgeClsName = (Count: number) => {
    const cls =
      Count > 9 && Count <= 99
        ? 'msg-tab-name msg-name-min'
        : Count > 99
          ? 'msg-tab-name msg-name-max'
          : 'msg-tab-name';
    return cls;
  };

  // 总的数量
  let count = 0;
  // 获取全部所需参数数组
  let all = useRef<any[]>([]);
  // 当前所选分组（更新徽标使用）
  let currentGroup = useRef<any[]>([]);
  let allByDropList: any = [
    {
      key: 'all',
      name: getMessage('Message.tips.all_messages'), // 全部消息
      label: (
        <Badge count={0} overflowCount={99}>
          <div>
            <TextWidget>Message.tips.all_messages</TextWidget> {/* 全部消息 */}
          </div>
        </Badge>
      ),
    },
  ];

  const getNum = () => {
    return count;
  };

  // 处理所有获取所有消息参数组装
  const setGroups = (arr: any[], stop?: boolean) => {
    $group(arr)
    all.current = arr?.map((item: any) => {
      return {
        groupKey: item.Key || item.GroupKey,
        appId: item?.AppId?.replaceAll('{AppId}', appInfo?.AppId),
      };
    }) || [];
    !stop && getMessge(all.current);
  }

  // 存在有数据的分组进行数据组装
  if (group) {
    group?.map((item: any) => {
      allByDropList.push({
        key: `${item.AppId}_${item.GroupKey}`,
        name: getMessage(item.GroupName),
        label: (
          <Badge
            className={getBadgeClsName(item.Count)}
            count={item.Count}
            overflowCount={99}
          >
            <div title={getMessage(item.GroupName)}><TextWidget>{item.GroupName}</TextWidget></div>
          </Badge>
        ),
      });
      count = count + item.Count;
    });
    // 同步更新徽标
    if (currentGroup.current) {
      let key = currentGroup.current?.[0]?.key || false;
      if (key) {
        currentGroup.current = allByDropList.filter(
          (menu: any) => menu.key == key,
        );
      }
    }
    allByDropList[0].label = (
      <Badge
        className={getBadgeClsName(count)}
        count={Number.isNaN(count) ? 0 : count}
        overflowCount={99}
      >
        <div title={getMessage('Message.tips.all_messages')}>
          {/* 全部消息 */}
          <TextWidget>Message.tips.all_messages</TextWidget> {/* 全部消息 */}
        </div>
      </Badge>
    );
  }

  // 根据分组获取有消息的分组
  const getMessge = (nowFroup?: any, fn?: () => void) => {
    request(nowFroup ? nowFroup : all.current, (msgGroup: any) => {
      const list: any = []
      msgGroup.forEach((item: any) => {
        if (!list.find((i: any) => (i.AppId === item.AppId && i.GroupKey === item.GroupKey))) {
          list.push(item)
        }
      })
      const data = configEvents.current?.onMsgGroupTrans?.(msgGroup) || msgGroup
      setGroups(data, true);
      setGroups(list, true);
      fn?.();
    });
  };

  // 刷新
  const reFresh = useCallback(() => {
    $key((pre: number) => pre + 1);
    getMessge();
  }, []);

  // 获取当前应用消息分组
  const getMessageGroup = () => {
    getMessageAllGroup({
      appId: appInfo.AppId,
      pageIndex: 1,
      pageSize: 9999
    }).then((res: any) => {
      setGroups(res.Items)
    })
  }

  useEffect(() => {
    if (count >= 0) {
      props?.emit?.('onChange');
    }
  }, [count]);

  // 跳转新页面
  const goNewPage = () => {
    const { origin, pathname, search } = window.location;

    if (!props.correlationPage) {
      hintMessage(getMessage('Message.tips.no_correlationPage'));
      return;
    }

    const [name] = props.correlationPage.split(',');
    window.open(`${origin}${pathname}${search}#${routerPrefix}${name}`);
  };

  // 当前窗口打开页面
  const goCurrentWindow = () => {
    if (!props.correlationPage) {
      hintMessage(getMessage('Message.tips.no_correlationPage'));
      return;
    }

    const [name] = props.correlationPage.split(',');
    history.push(`${routerPrefix}${name}`)
  };

  const ModalMessage = (modalMessageProps: any) => {
    return (
      <div className="modal-message" title={modalMessageProps.message}>
        {props.messageIcon?.type !== '' && <Icon />}
        <div className="message-title">{modalMessageProps.message}</div>
        {modalMessageProps.url && (
          <div
            className="message-see"
            onClick={() => {
              window.open(`${location.origin}${modalMessageProps.url}`);
            }}
          >
            {getMessage('Message.tips.see_now')}
          </div>
        )}
      </div>
    );
  };

  const Icon = () => {
    return (
      <span className="message-icon">
        <InbizIcon
          type={props.messageIcon?.type || 'icon-ic-xiaoxi1'}
          style={{ color: props.messageIcon?.color || 'rgba(244,166,35,1)' }}
        />
      </span>
    );
  };

  const throttle = (fn: any, delay: any) => {
    let timer: any = null;
    return () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn();
      }, delay);
    };
  };

  // 实时消息弹窗
  const openTimer = () => {
    timer.current = setTimeout(() => {
      if (messageList.current.length) {
        notification.open({
          key: messageList.current[0].key,
          message: (
            <ModalMessage
              message={messageList.current[0].message}
              url={messageList.current[0].url}
            />
          ),
          closeIcon: <InbizIcon type="icon-ic-close-bold" />,
          className: 'message-notification',
          style: {
            width: '300px',
            height: '52px',
            padding: ' 0px 0px 0px 12px',
            display: 'flex',
            alignItems: 'center',
            borderRadius: '4px',
            boxShadow: '0px 0px 3px 0px rgba(0, 0, 0, 0.16)',
            marginBottom: '14px',
          },
        });
        messageList.current = messageList.current.slice(1);
      }
      clearTimeout(timer.current);
      openTimer();
    }, 500);
  };

  // 全部已读
  const allReaded = useCallback(() => {
    $loading(true);
    setReaded({
      readAll: true,
      group: all.current,
    })
      .then((res) => {
        window.parent.postMessage(
          { type: 'refresh', id: props.controlId },
          location.origin,
        );
        if (res) {
          getMessge(false, () => $key((pre: number) => pre + 1));
          datalRef.current?.refreshList()
        }
        $loading(false);
      })
      .catch(() => $loading(false));
  }, [all.current]);

  // 弹窗分类筛选菜单
  const menu = (
    <Menu
      items={allByDropList}
      onClick={(item) => {
        $modalGroup(false);
        const selectMenu = allByDropList.filter(
          (menu: any) => menu.key == item.key,
        );
        $selectMenuKey(selectMenu);
        currentGroup.current = [...selectMenu];
        if (item.key == 'all') {
          $selectGroup(all.current);
          getMessge();
        } else {
          const selectItem = all.current.filter(
            (group: any) => (group.groupKey == item.key.substring(item.key.indexOf('_') + 1) && group.appId == item.key.substring(0, item.key.indexOf('_'))),
          );
          $selectGroup(selectItem);
          getMessge();
        }
      }}
    />
  );

  //已读未读筛选
  const menu2 = (
    <Menu
      items={[
        {
          key: '-1',
          label: getMessage('Message.tips.all'), // 全部
        },
        {
          key: '0',
          label: getMessage('Message.tips.unread'), // 未读
        },
      ]}
      onClick={(item) => {
        $allRead(false);
        $selectReadState(Number(item.key));
      }}
    />
  );

  // 分组数据变化请求分组详细数据
  useEffect(() => {
    if (props?.range == 'current') {
      beforeRangeToString.current = JSON.stringify(props.range);
      getMessageGroup()
    } else {
      if (beforeGroupToString.current !== JSON.stringify(props.msgGroup) || beforeRangeToString.current !== JSON.stringify(props.range)) {
        beforeGroupToString.current = JSON.stringify(props.msgGroup);
        beforeRangeToString.current = JSON.stringify(props.range);
        setGroups(props.msgGroup)
      }
    }
  }, [props.msgGroup, props.range]);

  // 刷新消息数量
  const refreshNum = () => {
    if (datalRef.current?.beforeItem) {
      getMessge();
      window.parent.postMessage({ type: 'refresh', id: props.controlId }, location.origin);
    }
  }

  // modal样式
  let modalStyle = {};

  // 如果是全屏的时
  if (isfullModal) {
    modalStyle = {
      height: '100vh',
      maxWidth: '100vw',
    };
  }
  const width = isfullModal ? '100%' : modalType === 'topDown' ? 600 : 800;

  // 获取tabs
  const getTabs = () => {
    const otherTab = group.map((item: any) => {
      return (
        <TabPane
          tab={
            <Badge
              className={getBadgeClsName(item.Count)}
              count={item.Count}
              overflowCount={99}
            >
              <div title={getMessage(item.GroupName)}>
                <TextWidget>{item.GroupName}</TextWidget>
              </div>
            </Badge>
          }
          key={item.Id}
        >
          <MessageDetail
            key={key}
            group={item}
            reFreshTabs={() => {
              getMessge();
            }}
            {...props}
            refsd={datalRef}
            emptyData={emptyData}
            selectReadState={selectReadState}
          />
        </TabPane>
      );
    });

    return (
      <Tabs
        defaultActiveKey="allMessage"
        popupClassName="msg-tabs-popup"
        onChange={() => getMessge()}
        destroyInactiveTabPane
        tabBarExtraContent={
          <div className="controlBox">
            <div className="msg-button" style={{ marginLeft: 12, padding: 0 }}>
              <Dropdown
                overlay={menu2}
                placement={'bottomRight'}
                overlayClassName="msg-tabs-popup msg-tabs-popup-filter"
                onVisibleChange={(visible) => {
                  $allRead(visible);
                }}
              >
                <div
                  onClick={(e) => e.preventDefault()}
                  style={{ padding: '0 12px', display: 'flex', height: 32 }}
                >
                  <div
                    className="msg-dropdown"
                    style={{ position: 'relative' }}
                  >
                    {selectReadState == '-1' ? (
                      <TextWidget>Message.tips.all</TextWidget>
                    ) : (
                      <TextWidget>Message.tips.unread</TextWidget>
                    )}
                    {/* 全部 : 未读 */}
                    <div
                      className={
                        allRead
                          ? 'message-icon message-icon-open'
                          : 'message-icon'
                      }
                    >
                      <InbizIcon type={'icon-ic-show_more'} />
                    </div>
                  </div>
                </div>
              </Dropdown>
            </div>
            <div className="msg-button" onClick={reFresh}>
              <InbizIcon type="icon-shuaxin" />
              <span className="msg-title">
                <TextWidget>Message.tips.Refresh</TextWidget> {/* 刷新 */}
              </span>
            </div>
            <div className="msg-button" onClick={allReaded}>
              {loading ? (
                // @ts-ignore
                <LoadingOutlined />
              ) : (
                <InbizIcon type="icon-quanbubiaojiyidu" />
              )}
              <span className="msg-title">
                <TextWidget>Message.tips.mark_all_read</TextWidget>{' '}
                {/* 全部标记已读 */}
              </span>
            </div>
          </div>
        }
        key={key}
      >
        <TabPane
          tab={
            <Badge
              className={getBadgeClsName(count)}
              count={Number.isNaN(count) ? 0 : count}
              overflowCount={99}
            >
              <div
                style={{ lineHeight: '35px' }}
                title={getMessage('Message.tips.all_messages')}
              >
                {/* 全部消息 */}
                <TextWidget>Message.tips.all_messages</TextWidget>{' '}
              </div>
            </Badge>
          }
          key={'allMessage'}
        >
          <MessageDetail
            allGroup={all.current}
            reFreshTabs={() => {
              getMessge();
            }}
            {...props}
            refsd={datalRef}
            emptyData={emptyData}
            selectReadState={selectReadState}
          />
        </TabPane>
        {otherTab}
      </Tabs>
    );
  };

  // 左右弹窗视图分组列表dom
  const getModalTabs = () => {
    const allTabs = [(
      <p
        key='allGroup'
        className={activeGK === '' ? 'active-group' : ''}
        onClick={() => {
          $activeGK('')
        }}
      >
        <span className='group-name'><TextWidget>Message.tips.all_messages</TextWidget></span>
        <Badge
          className={getBadgeClsName(count)}
          count={Number.isNaN(count) ? 0 : count}
          overflowCount={99}
        />
      </p>
    )]
    group.forEach((item: any) => {
      allTabs.push(
        <p
          key={`${item.AppId}_${item.GroupKey}`}
          className={activeGK === `${item.AppId}_${item.GroupKey}` ? 'active-group' : ''}
          onClick={() => {
            refreshNum()
            $activeGK(`${item.AppId}_${item.GroupKey}`)
          }}
        >
          <span className='group-name' title={getMessage(item.GroupName)}><TextWidget>{item.GroupName}</TextWidget></span>
          <Badge
            className={getBadgeClsName(item.Count)}
            count={item.Count}
            overflowCount={99}
          />
        </p>
      );
    });
    return allTabs
  }

  const selectGroupText = selectMenuKey[0]?.name
    ? selectMenuKey[0]?.name
    : allByDropList[0].name;
  const selectGroupLabel = currentGroup.current?.[0]?.label
    ? currentGroup.current[0].label
    : allByDropList[0].label;

  return (
    <>
      {props.viewtype === 'modal' && (
        <div
          onClick={() => {
            if (props.openWith == 'newPage') {
              goNewPage();
            } else if (props.openWith == 'currentWindow') {
              goCurrentWindow()
            } else {
              $isfullModal(false);
              if (modalType == 'topDown') {
                $modalShow(true);
              } else {
                $tabModalShow(true);
              }
              getMessge();
            }
          }}
          style={{
            cursor: 'pointer',
          }}
          key={key}
          className="message-modal-icon-box"
        >
          <Badge count={Number.isNaN(count) ? 0 : count} overflowCount={99}>
            <div
              className="message-modal-Icon"
              style={{ color: props.modalIcon?.color || '#666' }}
            >
              <InbizIcon
                type={props.modalIcon?.type}
                style={{
                  fontSize: 20,
                }}
              />
            </div>
          </Badge>
        </div>
      )}

      {(props.viewtype == 'modal' && modalType === 'topDown') ? (
        <Modal
          wrapClassName="msg-modal"
          visible={modalShow}
          className={isfullModal ? 'message-modal-full' : ''}
          centered
          width={width}
          style={modalStyle}
          bodyStyle={{
            width: '100%',
            height: '100%',
          }}
          destroyOnClose
          closable={false}
          title={
            <div className="msg-modal-title">
              <span>
                <TextWidget>Message.tips.modal_title</TextWidget>
              </span>
              <div>
                <Button
                  key={'fullScreen'}
                  type={'text'}
                  icon={
                    isfullModal ? (
                      <InbizIcon
                        type="icon-huanyuan"
                        style={{ fontSize: 20 }}
                      />
                    ) : (
                      <InbizIcon
                        type="icon-ic-zuidahua"
                        style={{ fontSize: 20 }}
                      />
                    )
                  }
                  onClick={() => $isfullModal(!isfullModal)}
                />
                <Button
                  key={'close'}
                  type={'text'}
                  icon={
                    <InbizIcon
                      type="icon-ic-close-bold"
                      style={{ fontSize: 18 }}
                    />
                  }
                  onClick={() => {
                    $modalShow(false);
                    $selectGroup(all.current);
                    $selectMenuKey([]);
                    currentGroup.current = [];
                    $selectReadState('-1');
                  }}
                />
              </div>
            </div>
          }
          footer={null}
        >
          <div className="msg-header" key={key}>
            <div className="msg-header-left">
              <div className="msg-button" onClick={reFresh}>
                <InbizIcon type="icon-shuaxin" />
                <span className="msg-title">
                  <TextWidget>Message.tips.Refresh</TextWidget> {/* 刷新 */}
                </span>
              </div>
              <div className="msg-button" onClick={allReaded}>
                {loading ? (
                  // @ts-ignore
                  <LoadingOutlined />
                ) : (
                  <InbizIcon type="icon-quanbubiaojiyidu" />
                )}
                <span className="msg-title">
                  <TextWidget>Message.tips.mark_all_read</TextWidget>{' '}
                  {/* 全部标记已读 */}
                </span>
              </div>
            </div>

            <div className="msg-header-right">
              <Dropdown
                overlay={menu}
                placement={'bottomRight'}
                onVisibleChange={(visible) => {
                  $modalGroup(visible);
                }}
                overlayClassName="msg-tabs-popup"
              >
                <div onClick={(e) => e.preventDefault()}>
                  <div className="msg-dropdown">
                  <div className="msg-dropdown-item" title={getMessage(selectGroupText)}>
                      <TextWidget>{selectGroupLabel}</TextWidget>
                    </div>
                    <div
                      className={
                        modalGroup
                          ? 'message-icon message-icon-open'
                          : 'message-icon'
                      }
                    >
                      <InbizIcon type={'icon-ic-show_more'} />
                    </div>
                  </div>
                </div>
              </Dropdown>

              <Dropdown
                overlay={menu2}
                placement={'bottomRight'}
                overlayClassName="msg-tabs-popup msg-tabs-popup-filter"
                onVisibleChange={(visible) => {
                  $allRead(visible);
                }}
              >
                <div onClick={(e) => e.preventDefault()}>
                  <div
                    className="msg-dropdown"
                    style={{ position: 'relative' }}
                  >
                    {selectReadState == '-1'
                      ? getMessage('Message.tips.all')
                      : getMessage('Message.tips.unread')}
                    {/* 全部 : 未读 */}
                    <div
                      className={
                        allRead
                          ? 'message-icon message-icon-open'
                          : 'message-icon'
                      }
                    >
                      <InbizIcon type={'icon-ic-show_more'} />
                    </div>
                  </div>
                </div>
              </Dropdown>
            </div>
          </div>

          <div
            className={
              isfullModal ? 'msg-modal-content-full' : 'msg-modal-content'
            }
          >
            <MessageDetail
              key={key}
              allGroup={selectGroup ? selectGroup : all.current}
              reFreshTabs={() => {
                getMessge();
              }}
              {...props}
              refsd={datalRef}
              emptyData={emptyData}
              msgOpenLength={isfullModal ? false : 389}
              selectReadState={selectReadState}
            />
          </div>
        </Modal>
      ) : (props.viewtype == 'modal' && modalType === 'leftRight') ? (
        <Modal
          wrapClassName="inbiz-message-tab-modal"
          visible={tabModalShow}
          className={isfullModal ? 'message-modal-full' : ''}
          centered
          width={width}
          style={modalStyle}
          bodyStyle={{
            width: '100%',
            height: '100%',
          }}
          destroyOnClose
          closable={false}
          title={null}
          footer={null}
        >
          <div className='modal-box'>
            <div className='modal-left'>
              <p><TextWidget>Message.tips.modal_title</TextWidget></p>
              <div className='model-group-list'>
                {getModalTabs()}
              </div>
            </div>
            <div className='modal-right'>
              <Tabs
                activeKey={String(selectReadState)}
                tabBarExtraContent={{
                  left: (
                    <div className='tabs-left-empty' />
                  ),
                  right: (
                    <div className="tabs-title-handle">
                      <div className="msg-read-all" onClick={allReaded}>
                        {loading ? (
                          // @ts-ignore
                          <LoadingOutlined />
                        ) : (
                          <InbizIcon type="icon-quanbubiaojiyidu" />
                        )}
                        <span className="msg-title">
                          <TextWidget>Message.tips.mark_all_read</TextWidget>
                          {/* 全部标记已读 */}
                        </span>
                      </div>
                      <Button
                        key={'fullScreen'}
                        type={'text'}
                        icon={
                          isfullModal ? (
                            <InbizIcon
                              type="icon-huanyuan"
                              style={{ fontSize: 20 }}
                            />
                          ) : (
                            <InbizIcon
                              type="icon-ic-zuidahua"
                              style={{ fontSize: 20 }}
                            />
                          )
                        }
                        onClick={() => $isfullModal(!isfullModal)}
                      />
                      <Button
                        key={'close'}
                        type={'text'}
                        icon={
                          <InbizIcon
                            type="icon-ic-close-bold"
                            style={{ fontSize: 18 }}
                          />
                        }
                        onClick={() => {
                          $tabModalShow(false);
                          $activeGK('');
                          $selectReadState('0')
                          $selectGroup(all.current);
                          currentGroup.current = [];
                          refreshNum()
                        }}
                      />
                    </div>
                  )
                }}
                onChange={(e) => {
                  refreshNum()
                  $selectReadState(e as '0' | '1')
                }}
                destroyInactiveTabPane
              >
                {
                  [{ key: '0', label: 'Message.tips.unread' }, { key: '1', label: 'Message.tips.read' }].map((item: any) => {
                    return (
                      <Tabs.TabPane key={item.key} tabKey={item.key} tab={getMessage(item.label)}>
                        <MessageDetail
                          allGroup={all.current}
                          reFreshTabs={() => {
                            getMessge();
                          }}
                          refsd={datalRef}
                          emptyData={emptyData}
                          selectReadState={Number(item.key)}
                          activeGroupKey={activeGK}
                          {...props}
                        />
                      </Tabs.TabPane>
                    )
                  })
                }
              </Tabs>
            </div>
          </div>
        </Modal>
      ) : (
        getTabs()
      )}
    </>
  );
};

export default Message;
